<template>
  <upload-video v-model="data.videoUrlList"
                :video-limit="3"
                video-path="test"
                service-file-root-path="http://127.0.0.1:8080"
                service-url="http://127.0.0.1:8080/file"/>

  <div class="video-list">
    <video v-for="(item, index) in data.videoUrlList" :key="index"
           controls style="height: 400px; width: 400px;">
      <source :src="'http://127.0.0.1:8080/' + item" type="video/mp4">
      您的浏览器不支持 HTML5 视频
    </video>
  </div>

  <el-button type="primary" @click="testClick">测试</el-button>
</template>

<script setup lang="ts">
import UploadVideo from '@/components/UploadVideo.vue'
import { reactive } from 'vue'

const data = reactive({
  videoUrlList: []
})

const testClick = () => {
  console.log(data.videoUrlList)
}
</script>

<style lang="scss">
.video-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>
